<!--医生： 随访管理界面 -->
<template>
    <div class="MyContainer">
        <div class="mt-4">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center"> 用户名 </span>
            <el-input style="width: 300px" v-model="input" placeholder="请输入用户名" class="input-with-select">
                <template #append>
                    <el-button :icon="Search" />
                </template>
            </el-input>
            <!-- <el-button type="primary" @click="exportXlsx" >导出Excel</el-button> -->
        </div>
        
        <div class="handle-box">
            <el-button type="primary" @click="exportXlsx"  style="float: right">导出Excel</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="data" label="随访日期" width="200" />
            <el-table-column prop="manner" label="随访方式" width="200" />
            <el-table-column prop="name" label="随访患者" width="200" />
            <el-table-column prop="info" label="健康评估" width="400" />
            <el-table-column prop="detail" label="健康档案" width="200">
                <!--跳转到用户详情页面--> 
                <router-link :to="{path:'/BodyIndex'}">查看详情</router-link>
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template #default="scope">
                    <el-button link type="primary" @click.prevent="deleteRow(scope.$index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button class="mt-4" type="primary" style="width: 10%;float: right" size="small" @click="onAddItem">新增随访记录</el-button>

        <div class="example-pagination-block1">
            <el-pagination page-size="5" layout="prev, pager, next" :total="tableData.length" />
        </div>
        <el-divider border-style="dashed" />

    </div>
</template>

<script setup lang="ts" name="contracted-user">
import { ref } from 'vue';
import * as XLSX from 'xlsx';
import { Search } from '@element-plus/icons-vue'
import dayjs from 'dayjs'


const input = ref('')
interface TableItem {
    data: string;
    manner: string;
    name: string;
    info: string;
}
const now = new Date()

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = () => {
    //console.log("获取数据")
    tableData.value = [
        {
            data: '2022-8-30',
            manner: '走访',
            name: '小明',
            info: '',
        },
        {
            data: '2022-8-30',
            manner: '走访',
            name: '小明',
            info: '',
        },
    ];
};
getData();

const list = [['随访日期', '随访方式', '随访患者','健康评估']];
const exportXlsx = () => {
    tableData.value.map((item: any, i: number) => {
        const arr: any[] = [i + 1];
        arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
        list.push(arr);
    });
    let WorkSheet = XLSX.utils.aoa_to_sheet(list);
    let new_workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
    XLSX.writeFile(new_workbook, `表格.xlsx`);
};
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}
const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    data: dayjs(now).format('YYYY-MM-DD'),
    manner: '走访',
    name: '小明',
    info: '',
  })
}
</script>

<style scoped>
.mt-4 {
    float: left;
    margin-bottom: 30px;
}

.table {
    width: 100%;
    font-size: 14px;
}

</style>
